<route lang="json5" type="device">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '设备',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
// 获取环境变量
const COLOR_THEME = import.meta.env.VITE_APP_COLOR_THEME
const financeTag1 = [
  {
    title: '统计概览',
    icon: 'file-copy',
    url: '',
    bg: 'bg1',
  },
  {
    title: '支付日志',
    icon: 'play-circle-stroke',
    url: '',
    bg: 'bg2',
  },
  {
    title: '趋势图表',
    icon: 'evaluation',
    url: '',
    bg: 'bg3',
  },
  {
    title: '财务日志',
    icon: 'books',
    url: '',
    bg: 'bg4',

  },
  {
    title: '购币日志',
    icon: 'evaluation',
    url: '',
    bg: 'bg5',
  },
  {
    title: '支付投诉',
    icon: 'app',
    url: '',
    bg: 'bg6',
  },
  {
    title: '远程派币',
    icon: 'evaluation',
    url: '',
    bg: 'bg7',
  },
  {
    title: 'AI币日志',
    icon: 'evaluation',
    url: '',
    bg: 'bg8',
  },
]
const financeTag2 = [
  {
    title: '绑定设备',
    desc: '扫主机绑定码',
    icon: 'scan',
    url: '',
    bg: 'bg1',
    type: 'scan',
  },
  {
    title: '设备列表',
    desc: '配置、详情、派币',
    icon: 'fork',
    url: '/pages/device/deviceList',
    bg: 'bg2',
  },
  {
    title: '支付套餐',
    desc: '便于支付优惠政策',
    icon: 'copy',
    url: '',
    bg: 'bg3',
  },
  {
    title: '标签分组',
    desc: '对设备设置标签管理',
    icon: 'star',
    url: '',
    bg: 'bg4',

  },
  {
    title: '门店管理',
    desc: '对设备划分门店管理',
    icon: 'bags',
    url: '',
    bg: 'bg5',
  },
  {
    title: '更多功能',
    icon: 'app',
    url: '',
    bg: 'bg6',
  },
]
const deviceTag2 = [
  {
    title: '银行卡管理',
    icon: 'creditcard',
    url: '',
    bg: 'bg12',
  },
  {
    title: '微信管理',
    icon: 'usb',
    url: '',
    bg: 'bg8',

  },
  {
    title: '支付宝管理',
    icon: 'bags',
    url: '',
    bg: 'bg7',
  },
]
const deviceTag3 = [
  {
    title: '分账账号',
    icon: 'play-circle-stroke',
    url: '',
    bg: 'bg8',
  },
  {
    title: '分账日志',
    icon: 'file-copy',
    url: '',
    bg: 'bg7',
  },
]

const query_sb_chked_rs = ref('')
const query_md_chked_rs = ref('')
const sbList = ref([])
const storeList = ref([])
function handleChange({ value }) {
  console.log(value)
}
const dropMenu = ref()
const slider = ref() // slider 1.2.25支持
function confirm() {
  dropMenu.value.close()
}

function handleOpened() {
  slider.value?.initSlider()
}
</script>

<template>
  <view class="top-content">
    <view class="circle" />
    <view class="title">
      财务管理
    </view>
    <view class="desc">
      统计概览、支付日志、图表分析、财务日志、结算日志等...
    </view>
  </view>
  <view class="tag-list">
    <view class="flex">
      <wd-button :round="false" size="small" custom-class="btn-tag">
        上月
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        昨天
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        今天
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        本月
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        今年
      </wd-button>
      <wd-button :round="false" size="small" custom-class="btn-tag">
        自定义＞
      </wd-button>
    </view>
    <view class="timmer">
      查询时间 :2025/08/22 17:11 ~ 2025/08/22 17:11
    </view>
  </view>
  <wd-drop-menu class="drop-menu">
    <wd-drop-menu-item ref="dropMenu" title="按: 设备编号" @opened="handleOpened">
      <view class="drop-content" />
    </wd-drop-menu-item>
    <wd-drop-menu-item ref="dropMenu" title="按: 门店 / 标签" @opened="handleOpened">
      <view class="drop-content">
        <view class="drop-label">
          按: 设备编号
        </view>
        <view class="sb-type">
          <wd-radio-group v-model="query_sb_chked_rs" shape="dot" inline>
            <wd-radio v-for="item in sbList" :key="item.value" :value="item.value">
              {{ item.label }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="drop-label">
          按: 门店 / 标签
        </view>
        <view class="sb-type">
          <wd-radio-group v-model="query_md_chked_rs" shape="dot" inline>
            <wd-radio v-for="item in storeList" :key="item.value" :value="item.value">
              {{ item.label }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="i-btn">
          <wd-button type="primary" size="small" custom-class="primary-button" block>
            筛选查询
          </wd-button>
        </view>
      </view>
    </wd-drop-menu-item>
  </wd-drop-menu>
  <view class="center-box">
    <view class="btn-box">
      <wd-button type="primary" size="small" block custom-class="primary-button">
        筛选查询
      </wd-button>
    </view>
    <view class="flex py-40rpx">
      <view class="row flex-1 text-center">
        通道收款
        <view class="text-60rpx">
          0.00<text class="text-24rpx">
            元
          </text>
        </view>
        <view class="text-#969799">
          结算金额
        </view>
      </view>
      <view class="row flex-1 text-center">
        测试收款
        <view class="text-60rpx">
          0.00<text class="text-24rpx">
            元
          </text>
        </view>
        <view class="text-#969799">
          可充值服务费
        </view>
      </view>
    </view>
    <view class="statistics">
      <view class="s-col">
        <view class="s-item">
          <view class="s-label">
            通道收款：
          </view>
          <view>
            <text class="num">
              0.00
            </text>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            支付笔数：
          </view>
          <view>
            <text class="num">
              0
            </text>笔
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            通道手续费：
          </view>
          <view>
            <text class="num">
              0
            </text>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            支付服务费：
          </view>
          <view>
            <text class="num">
              0
            </text>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            派币服务费：
          </view>
          <view>
            <text class="num">
              0
            </text>元
          </view>
        </view>
      </view>
      <view class="s-col">
        <view class="s-item">
          <view class="s-label">
            通道退款：
          </view>
          <view>
            <text class="num">
              0.00
            </text>元
          </view>
        </view>
        <view class="s-item">
          <view class="s-label">
            退款笔数：
          </view>
          <view>
            <text class="num">
              0
            </text>笔
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in financeTag1" :key="index" :span="6">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in deviceTag2" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list pt60">
    <wd-row>
      <wd-col v-for="(item, index) in deviceTag3" :key="index" :span="8">
        <view class="item">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<style lang="scss" scoped>
    .pt60{
        padding-top: 60rpx;
    }
    .tag-list{
        padding: 20rpx;
        background-color: #ffffff;
        margin: 20rpx;
        border-radius: 20rpx;
          .timmer {
            color:#646566;
            padding: 10rpx 0;
          }
    }
    .btn-tag {
        margin: 0 10rpx;
        background-color: $uni-color-primary !important;
    }
    .center-box{
        padding: 0 20rpx;
        background-color: #ffffff;
        padding-bottom: 20rpx;
        .btn-box{
          padding: 0 50rpx;
        }
    }
    .statistics{
      display: flex;
      justify-content: space-around;
      .s-col{
        width: 40%;
        .s-item{
          display: flex;
          padding-bottom: 5px;
          .s-label{
            width: 170rpx;
            text-align: right;
          }
          .num{
            background-color: $uni-color-orange;
            color: #fff;
            border-radius: 4rpx;
            padding: 0 4rpx;
          }
        }

      }
    }
</style>
